<template>
	<kb-layout>
		<view  class="slidebox noalarm" >
			<!-- 视频图片和户型图轮播 -->
			<kb-group-swipe  :faceimages="good?.slides"></kb-group-swipe>
		  <!-- 圆角背景 -->
			 <!-- <cover-view class="coverbg abmt30"> </cover-view> -->
			 
			 <view  class="topbg abmt30 ">
				<view class="topbg__a"></view>
			 </view>
		 <!-- 圆角背景 -->
		</view> 
		<view class="show">
			
			<view class="u-padding-top-10 u-padding-left-30 u-padding-right-30 u-margin-bottom-40 ">
				<view class="color-main u-line-2 u-margin-bottom-10">
					 <text class="font-size22 font-weight">{{good.title}}</text>				 
				</view>
				
				<view class="">			 
					<text class="font-size12 color-gray">{{good.sub_title}}</text>					 
				</view>	
				
				<view class="u-flex u-flex-between u-margin-top-20">
					
					<view class="price_left">
						
						<view v-if="(good.min_price)" class="price color-red">
							<text>¥ </text>
							<text class="font-size20 font-weight">{{good.min_price}}-{{good.max_price}}</text>
						</view>
						<view v-else-if="(good.price)"  class="price color-red">
							<text class="font-size11">¥ </text>
							<text class="font-size20 font-weight">{{ good.price }}</text>
							<text class="font-size10"></text> 
						</view>
						<view v-else>
							<text class="font-size10 color-gray">无票</text>
						</view>
						
					</view>
					
					<view class="sales_nums font-size14">
						<text class="">{{good.virtual_sales}}人</text>
						<text class="color-gray">付款</text>
					</view>
				</view>
			</view>
			
			<view class="address u-flex u-flex-between u-margin-10 u-padding-25">
				<view class="u-line-1">
					<text class="font-size15">{{ee.company.address}}</text>
				</view>
				<view class="daohang color-map">
					<navigator url="/pages/map/map">
						<text class="font-size14 iconfont icon-daohang"></text>
						<text class="font-size15">导航</text>
					</navigator>
				</view>
			</view>
		</view>
		
		<view class="tickets-box show u-margin-top-25">
		
			<view v-for="(item ,index) in good.tickets" :key="index"
			 class="tickets u-padding-bottom-30" >
				 <TicketItem :item="item"  @select="onTicketSelect"></TicketItem>
			</view>
		
		</view>
		
		<view class="relates show u-padding-25 u-margin-top-25">
			<view class="u-margin-bottom-40 u-padding-top-15">
				<text class="font-size18 font-weight"> 为您优选 </text>
			</view>
		 			 
			<view class="good-items u-margin-bottom-40 "  v-for="(good,index) in relateGoods" :key="index" >
				<goodItem :item="good" :small="true"></goodItem>
			</view>
			
			 
		</view>
		<!-- 拨打电话 分享组件 -->
		<view class="buy-bar">
			<view class="solt">
				 <buyBar :good="good" @clickBuyBtn="onClickBuyBtn"></buyBar>
			</view>			
		</view>
		
		<!-- 下单购买的sku选择 -->
		<selectSku v-model:show="showSku"  :ticket_id="ticket_id"  :good="good"></selectSku>
	</kb-layout>
</template>

<script>
	import TicketItem from "./componets/ticket-item.vue";
	import buyBar from "./componets/buy-bar.vue";
	import goodItem from "./componets/good-item.vue";
	import selectSku from "./componets/select-sku.vue";
	import{
		goodDetails,
		getRelateGood
	} from "@/common/api.js"
	//
	export default {
		components:{
			TicketItem, 
			buyBar,
			goodItem,
			selectSku
		},
		data(){
			return {
				good :{},
				relateGoods:[],
				showSku: false ,
				ticket_id :0 ,//当前选哪个门票进行购买
			}
		},
	 
		onLoad(option) {
			goodDetails(option.id).then((ret)=> this.good = ret )
			//相关商品随机查询
			getRelateGood(option.id).then((ret)=> this.relateGoods = ret.data )
		},
		methods:{
			onClickBuyBtn(e){
				this.ticket_id = 0;
				// console.log(e);
				this.showSku  = true;
			},
			onTicketSelect(id){
				  // console.log('onTicketSelect',id)
				this.ticket_id = id;
				this.showSku  = true;
			}
		}
	}
</script>

<style lang="scss">

	.slidebox{
			position: relative;
			
			.coverbg{
				position: absolute;			
				width: 100%;
				bottom: -15rpx;
				left: 0;
				height: 40rpx;
				background: linear-gradient(to bottom, #aaa, #fff);
				opacity: 0.5;	
				box-shadow: 0px -10px 10px 0px #aaa;
			} 
		}
		// 是否显示红色背景
		 .noalarm .topbg.abmt30{
			bottom: 0px;
		 }
		 .noalarm .alarmbg.abmt30{
			bottom: 35px;
			display: none;
		 }
		.alarm .topbg.abmt30{
			bottom: -24px;
		}
		.alarm .alarmbg.abmt30{
			bottom: -15px;
		}
		// 是否显示红色背景
		.topbg{	
			position: absolute;
			 height: 22px;  
			 left: 0;
			 // bottom:0rpx;
			 width: 100%;
		 
			&__a{
				background: #fff  !important;
				border-top-left-radius: 40rpx;
				border-top-color: #fff ;
				border-top-width: 2rpx;
				border-right: 2px solid #fff;
				border-left: 2px solid #fff;
				border-top-style: solid; 
				border-top-right-radius:40rpx;
				// margin-left: 10px;
				// margin-right: 10px;	
				height: 20px;
				margin-top: 8px;
			}
		}
		.alarmbg{
			position: absolute;
			 height: 50px;  
			 left: 0;
			 // bottom:35rpx;
			 width: 100%;
			 
			 &__a{
			 	background: #ff0000  !important;
			 	border-top-left-radius: 40rpx;
			 	border-top-color: #ff0000 ;
			 	border-top-width: 2rpx;
			 	border-right: 2px solid #ff0000;
			 	border-left: 2px solid #ff0000;
			 	border-top-style: solid; 
			 	border-top-right-radius: 40rpx;
			 	margin-left: 12px;
			 	margin-right: 12px;	
			 	height: 50px;
			 	margin-top: 10px;
			 }
		}
		.alarm_text{
			line-height: 35px;
			display: flex;
			justify-content: space-between;
			padding-left: 15px;
			padding-right: 17px;
		}
 
	.show{
	 
		margin-top:  0px; 
		padding-bottom: 10px;
		background: #fff;
		 
	} // .show end
	.address{
		background-color:#F1F2FC;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		align-items: center;
		color: $u-content-color;
		
		.daohang{
			min-width: 60px;
			text-align: right;
		}
	}
	.tickets-box {
		padding-left: 15px;
		padding-right: 15px;

		.tickets {
			border-bottom: $u-border-color solid 1px;			 
			padding-top: 1.1rem;
			
		}
		
			
		.tickets:last-child{
			border-bottom: 0;
		}
	}
	.buy-bar {
		height: 90px;
		.solt{
			position: fixed;
			left: 0;
			bottom: 0px;
			width: 100%;
		}
	}
	.relates .good-items{
		border-bottom: $u-border-color 1px solid;
		padding-bottom: 20px;
	}
	.relates .good-items:last-child{
		border-bottom: 0;
	}
</style>